<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <link rel="stylesheet" href="../css/swiper.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/swiper.jquery.min.js"></script>
    <style>
        .header .right a{color: #fff;}
        .swiper-slide{width: 100%;height: 200px;background-size: contain;background-position: center;background-repeat: no-repeat;}
        .swiper-pagination-bullet{background-color: #fff;opacity: .4;}
        .swiper-pagination-bullet-active{background-color: #ffc10c;opacity: 1;}

        .vip-name{color: #e60014;}
        .sex{color: #049cce;}
        .star{color: #fec015;}

        .f-info{line-height: 45px;padding: 0 12px;font-size: 14px;overflow: hidden;}
        .f-info .name{float: left;}
        .f-info .money{float: right;color: #3faa50;}
        .middle{display: -webkit-box;display: box;padding: 5px 0;border-top: 5px solid #eeedf3;border-bottom: 5px solid #eeedf3;}
        .middle a{-webkit-box-flex: 1;box-flex: 1;line-height: 35px;text-align: center;display: block;font-size: 14px;color: #333;}
        .middle .shop{border-left: 1px solid #eeedf3;color: red;}

        .list{}
        .list li{position: relative;line-height: 45px;overflow: hidden;padding: 0 12px;}
        .list li .left{float: left;width: 50px;color: #888;}
        .list li .center{float: left;color: #444;}
        .list li .right{float: right;color: #888;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">个人资料</div>
        <div class="right">
            <a href="">投诉</a>
        </div>
    </div>
</header>
<div class="content">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image: url('../img/pic_lessor.png')"></div>
            <div class="swiper-slide" style="background-image: url('../img/pic_lessor.png')"></div>
            <div class="swiper-slide" style="background-image: url('../img/pic_lessor.png')"></div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="f-info">
        <div class="name">
            <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
            <span class="sex"><i class="iconfont icon-women"></i></span>
            <span class="star"><i class="iconfont icon-star2"></i></span>
        </div>
        <div class="money"></div>
    </div>
    <div class="middle">
        <a href="../html/user_rate.html" class="talk">用户评价（<span>20</span>）</a>
        <a href="javascript:void(0);" class="shop"></a>
    </div>
    <ul class="list">
        <li class="bottom-line">
            <p class="left">ID</p>
            <p class="center">201606145437</p>
        </li>
        <li class="bottom-line">
            <p class="left">地区</p>
            <p class="center">成都市高新区天府大道</p>
        </li>
        <li class="bottom-line">
            <p class="left">年龄</p>
            <p class="center">18</p>
            <p class="right">岁</p>
        </li>
        <li class="bottom-line">
            <p class="left">身高</p>
            <p class="center">185</p>
            <p class="right">cm</p>
        </li>
        <li class="bottom-line">
            <p class="left">体重</p>
            <p class="center">62</p>
            <p class="right">kg</p>
        </li>
        <li class="bottom-line">
            <p class="left">职业</p>
            <p class="center">代驾</p>
        </li>
        <li>
            <p class="left">签名</p>
            <p class="center">这个人很懒什么都没留下</p>
        </li>
    </ul>
</div>
</body>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        pagination: '.swiper-pagination'
    })
</script>
</html>